import React, { useMemo, useState } from 'react';
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Button, Layout, Menu, theme } from 'antd';
import classes from './App.module.scss';
import { Outlet, useLocation, useNavigate } from 'react-router-dom';
import { navList } from './routes/router';

const { Header, Sider, Content } = Layout;

const App: React.FC = () => {
  const [collapsed, setCollapsed] = useState(false);
  const { token } = theme.useToken();
  const navigate = useNavigate();
  const { pathname } = useLocation();
  const [defaultSelectedKeys, defaultOpenKeys] = useMemo(() => {
    let key: string[] = [];
    let pKey: string[] = [];
    navList.forEach((t) => {
      if (t.children && t.children.length > 0) {
        t.children.forEach((tt) => {
          if (tt.path == pathname) {
            key = [pathname];
            pKey = [t.path];
          }
        });
      } else {
        if (t.path == pathname) {
          key = [pathname];
        }
      }
    });
    return [key, pKey];
  }, [pathname]);

  return (
    <Layout className={classes.app}>
      <Sider trigger={null} collapsible collapsed={collapsed} className={classes.menu}>
        <div className={classes.logo} />
        <Menu
          theme="dark"
          mode="inline"
          defaultOpenKeys={defaultOpenKeys}
          defaultSelectedKeys={defaultSelectedKeys}
          onClick={(e) => {
            navigate(e.key);
          }}
          items={navList.map((t) => ({
            label: t.title,
            key: t.path,
            icon: t.icon,
            children: t.children
              ? t.children.map((t) => ({ label: t.title, key: t.path, icon: t.icon }))
              : undefined,
          }))}
        />
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: token.colorBgContainer }}>
          <Button
            type="text"
            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
            onClick={() => setCollapsed(!collapsed)}
            style={{
              fontSize: '16px',
              width: token.Layout?.headerHeight,
              height: token.Layout?.headerHeight,
            }}
          />
        </Header>
        <Content
          className={classes.content}
          // style={{
          //   background: colorBgContainer,
          //   borderRadius: borderRadiusLG,
          // }}
        >
          <div className={classes.wrap}>
            <Outlet />
          </div>
        </Content>
      </Layout>
    </Layout>
  );
};

export default App;
